<script setup lang="ts">
import StorageFormPanel from './StorageFormPanel.vue'
import { StorageApi } from '@/apis'
import type { TableInstanceColumns } from '@/components/ProTable/type'
import { useTable } from '@/hooks'
import { useUserStore } from '@/stores'

defineOptions({ name: 'Storage' })

const userStore = useUserStore()
const queryForm = reactive<StorageApi.StorageQuery>({
  keyword: undefined,
  status: undefined,
})

const {
  tableData,
  loading,
  search,
  handleDelete,
} = useTable(() => StorageApi.getList(queryForm))

const columns: TableInstanceColumns[] = [
  {
    title: '序号',
    width: 66,
    align: 'center',
    render: ({ rowIndex }) => h('span', {}, rowIndex + 1),
  },
  { title: '名称', dataIndex: 'name', slotName: 'name', width: 140, ellipsis: true, tooltip: true },
  { title: '编码', dataIndex: 'code', ellipsis: true, tooltip: true },
  { title: '状态', slotName: 'status', align: 'center' },
  { title: '类型', slotName: 'type', align: 'center' },
  { title: '访问密钥', dataIndex: 'accessKey', ellipsis: true, tooltip: true },
  { title: '终端节点', dataIndex: 'endpoint', ellipsis: true, tooltip: true },
  { title: '桶名称', dataIndex: 'bucketName', ellipsis: true, tooltip: true },
  { title: '域名', dataIndex: 'domain', ellipsis: true, tooltip: true },
  { title: '默认存储', dataIndex: 'defaultStorage', slotName: 'defaultStorage' },
  { title: '描述', dataIndex: 'description', ellipsis: true, tooltip: true },
  {
    title: '操作',
    slotName: 'action',
    width: 120,
    align: 'center',
    fixed: 'right',
    show: userStore.hasPermission(['system:storage:write']),
  },
]

// 删除
const onDelete = (item: StorageApi.StorageResp) => {
  return handleDelete(() => StorageApi.remove(item.id), {
    content: `是否确定删除该条数据？`,
    showModal: true,
  })
}

const StorageFormPanelRef = ref<InstanceType<typeof StorageFormPanel>>()
// 新增
const onCreate = () => {
  StorageFormPanelRef.value?.create()
}
// 详情
const onDetail = (row) => {
  StorageFormPanelRef.value?.open(row.id)
}
</script>

<template>
  <ProPage title="存储配置管理" description="维护和管理系统存储列表，请谨慎操作">
    <ProTable
      :data="tableData"
      :columns="columns"
      :loading="loading"
      :pagination="false"
      @refresh="search"
      @row-click="onDetail"
    >
      <template #toolbar-left>
        <a-input v-model="queryForm.keyword" placeholder="请输入关键字" allow-clear @change="search">
          <template #prefix>
            <icon-search />
          </template>
        </a-input>
        <DictSelect v-model="queryForm.status" code="CommonStatusEnum" style="width: 120px" placeholder="请选择状态" @change="search" />
      </template>
      <template #toolbar-right>
        <a-button v-permission="['system:storage:manage']" type="primary" @click="onCreate">
          <template #icon>
            <icon-plus />
          </template>
          <span>创建</span>
        </a-button>
      </template>
      <template #name="{ record }">
        <a-space fill>
          <span>{{ record.name }}</span>
          <a-tag v-if="record.defaultStorage" color="arcoblue" size="small" class="round">
            <template #default>
              默认
            </template>
          </a-tag>
        </a-space>
      </template>
      <template #status="{ record }">
        <CellStatus :status="record.status" />
      </template>
      <template #type="{ record }">
        <CellDict :value="record.type" code="StorageTypeEnum" />
      </template>
      <template #action="{ record }">
        <a-space>
          <a-link v-permission="['system:storage:manage']" status="danger" @click.stop="onDelete(record)">
            删除
          </a-link>
        </a-space>
      </template>
    </ProTable>
    <StorageFormPanel ref="StorageFormPanelRef" @change="search" />
  </ProPage>
</template>

<style lang="less" scoped></style>
